<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>THTML</title>
</head>
<body>
<!-- 页头 -->
<header>
    <h1>网站一级标题</h1>
    <nav>
        <ul>
            <li>导航链接一</li>
            <li>导航链接二</li>
            <li>导航链接三</li>
            <li>导航链接四</li>
        </ul>
    </nav>
</header>

<!-- 对应内容板块 -->
<section>
    <article>
        <h1>第一篇文章一级标题</h1>
        <h2>文章二级标题</h2>
        <div>
            <span>文章作者</span>
            <span>文章发表时间</span>
        </div>

        <p>第一篇文章内容开始--------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        <a href="#">这里有一个链接</a>
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        第一篇文章内容结束</p>
        <img src="images/神乐438×300.png" alt="Shenle 400*300">
        <p>第一篇文章内容开始--------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        <a href="#">这里有一个链接</a>
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        第一篇文章内容结束</p>
    </article>

    <article>
        <h1>第二篇文章一级标题</h1>
        <h2>文章二级标题</h2>
        <div>
            <span>文章作者</span>
            <span>文章发表时间</span>
        </div>

        <p>第二篇文章内容开始--------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
            <a href="#">这里有一个链接</a>
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        第二篇文章内容结束</p>
        <img src="images/神乐400×300.png" alt="Shenle 400*300">
        <p>第二篇文章内容开始--------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        <a href="#">这里有一个链接</a>
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        ----------------------------------------------------------------------------------------
        第二篇文章内容结束</p>
    </article>
</section>

<section>
    <nav>
        <ul>
            <li>列表项目一</li>
            <li>列表项目二</li>
            <li>列表项目三</li>
        </ul>
    </nav>
    <div>
        <h1>图片</h1>
        <figure>
            <figcaption>神乐001</figcaption>
            <img src="images/神乐400×300_01.png" alt="Shenle 001">
        </figure>
        <figure>
            <figcaption>神乐002</figcaption>
            <img src="images/神乐400×300_02.png" alt="Shenle 002">
        </figure>
        <figure>
            <figcaption>神乐003</figcaption>
            <img src="images/神乐400×300_03.png" alt="Shenle 003">
        </figure>
        <figure>
            <figcaption>神乐004</figcaption>
            <img src="images/神乐400×300_04.png" alt="Shenle 004">
        </figure>
        <figure>
            <figcaption>神乐005</figcaption>
            <img src="images/神乐400×300_05.png" alt="Shenle 005">
        </figure>
    </div>
</section>

<section>
    <article>
        <h1>最后一篇文章标题</h1>
        <div>
            <span>文章作者</span>
            <span>文章发表时间</span>
        </div>
        <ol>
            <li>排名1</li>
            <li>排名2</li>
            <li>排名3</li>
        </ol>
        <div>
            <p>下面是一个表格，给表格添加一个"border='1'"好让表格看起来是一个表格</p>
            <table border="1">
                <thead>
                    <tr>
                        <th>表头</th>
                        <th>表头</th>
                        <th>表头</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td><a href="#table">操作</a></td>
                    </tr>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td><a href="#table">操作</a></td>
                    </tr>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td><a href="#table">操作</a></td>
                    </tr>
                </tbody>
            </table>
        </div>

    </article>
</section>
<!-- 侧栏 -->
<aside>
    <h1>这是一个侧栏，这是侧栏标题</h1>
    <div>
        <h1>侧栏注册窗口标题</h1>
            <form>
            <p>
                <label>请输入邮箱地址: <input type="email" name="e-mail"></label>
                <p>邮箱地址请按格式输入</p>
            </p>
            <p>
                <span><label>请输入密码：<input type="password" name="password" minlength="6" maxlength="16"></label></span>
                <span><label>请再一次输入密码：<input type="password" name="password" minlength="6" maxlength="16"></label></span>
                <p>密码为10到16位英文数字</p>
            </p>
            <br>
            <span>
                <label for="sex">性别：</label>
                <input type="radio" name="sex" value="male">男
                <input type="radio" name="sex" value="female" checked>女
            </span>
            <span>
                <label for="city">城市:</label>
                <select name="city">
                    <option value="Beijing">Beijing</option>
                    <option value="Hunan">Hunan</option>
                    <option value="Shanghai">Shanghai</option>
                    <option value="Shenzhen">Shenzhen</option>
                </select>
            </span>
            <span>
                <label for="hobby">爱好：</label>
                <input type="checkbox" name="hobby" value="basketball">篮球
                <input type="checkbox" name="hobby" value="run">跑步
                <input type="checkbox" name="hobby" value="football">足球
                <input type="checkbox" name="hobby" value="baseball">网球
            </span>
            <span>
                <label><span>个人描述: <textarea cols="20" rows="4"></textarea></span></label>
            </span>

            <input type="button" value="确认提交">
        </form>
    </div>
</aside>
<!-- 页脚 -->
<footer>
    <p>版权所有&copy;</p>
</footer>
</body>
</html>